<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户主页</title>

    <link rel="stylesheet" href="./assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./assets/css/animate.min.css"/>

    <link rel="stylesheet/less" href="./assets/css/reset.less"/>
    <link rel="stylesheet/less" href="./assets/css/common.less"/>
    <link rel="stylesheet/less" href="./assets/css/UserIndex.less"/>
</head>
<body>
<!-- 用户信息 -->
<div class="user">
    <div class="avatar wow fadeInUp">
        <img src="./assets/images/avatar.png"/>
    </div>

    <div class="nickname wow fadeInUp" data-wow-delay="100ms">FunkyRicky</div>

    <a href="login.html" class="login wow fadeInUp" data-wow-delay="200ms">登录</a>
</div>

<!-- 菜单 -->
<div class="menulist wow fadeInUp" data-wow-delay="300ms">
    <a href="UserProfile.html" class="item">
        <span>基本资料</span>
        <img src='./assets/images/row.png'/>
    </a>
    <a href="TypeIndex.html" class="item">
        <span>卡片分类</span>
        <img src='./assets/images/row.png'/>
    </a>
    <a href="javascript:void(0)" id="logout" class="item">
        <span>退出账号</span>
        <img src='./assets/images/row.png' />
    </a>
</div>


<!-- 底部 -->
<div class="tabbar">
    <div class="box">
        <a href="index.html" class="item">
            <span class="icon glyphicon glyphicon-home"></span>
            <span class="name">首页</span>
        </a>
        <a href="ContactAdd.html" class="item">
            <span class="icon glyphicon glyphicon-list-alt"></span>
            <span class="name">新建</span>
        </a>
        <a href="UserIndex.html" class="item">
            <span class="icon glyphicon glyphicon-user"></span>
            <span class="name">我的</span>
        </a>
    </div>
</div>
</body>
<script src="./assets/js/less.min.js"></script>
<script src="./assets/js/jquery.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/wow.min.js"></script>
<script src="./assets/mui/js/mui.min.js"></script>
<script src="./assets/js/cookie.js"></script>

<script>
    new WOW().init()

    let business = cookie.get('business') ? JSON.parse(cookie.get('business')) : {}

    if (JSON.stringify(business) !== '{}') {
        $('.login').hide()
        $('.avatar img').attr('src', business.avatar)
        $('.nickname').text(business.nickname ? business.nickname : business.mobile);
    } else {
        $('#logout').hide()
    }

    $('#logout').click(() => {
        mui.confirm('确认退出账号？', (res) => {
            if (res.index === 1) {
                cookie.remove('business')
                mui.toast('账号退出成功')

                setTimeout(() => {
                    location.href = 'login.html'
                }, 2000)
            }
        })
    })
</script>
</html>